<template>
<el-row class="downrow1" type="flex" justify="center">
    <el-col :span="6" class="downcol1">
        <img src="../../assets/down/amain.png" class="downimg1" v-show="!bmain">
        <img src="../../assets/down/bmain.png" class="downimg1" v-show="bmain" @click="gomain">
    </el-col>
    <el-col :span="6" class="downcol1">
        <img src="../../assets/down/acart.png" class="downimg1" v-show="!bcart">
        <img src="../../assets/down/bcart.png" class="downimg1" v-show="bcart" @click="gocart">
    </el-col>
    <el-col :span="6" class="downcol1">
        <img src="../../assets/down/aorder.png" class="downimg1" v-show="!border">
        <img src="../../assets/down/border.png" class="downimg1" v-show="border" @click="goorder">
    </el-col>
    <el-col :span="6" class="downcol1">
        <img src="../../assets/down/aper.png" class="downimg1" v-show="!bper">
        <img src="../../assets/down/bper.png" class="downimg1" v-show="bper" @click="goper">
    </el-col>
</el-row>
</template>

<script>
export default {
    name:'down',
    data(){
        return{
            bmain:1,
            bcart:1,
            border:1,
            bper:1,
        }
    },
    methods:{
        gomain(){this.$router.replace({name:'pro_main'})},
        gocart(){this.$router.replace({name:'pro_cart'})},
        goorder(){this.$router.replace({name:'order_list'})},
        goper(){this.$router.replace({name:'persion'})},
    },
    mounted(){
        this.$bus.$on('Downimgshow',(data)=>{
            this.bmain=this.bcart=this.border=this.bper=1
            switch (data) {
                case 'main':
                    this.bmain=0
                    break;
                case 'cart':
                    this.bcart=0
                    break;
                case 'order':
                    this.border=0
                    break;
                case 'persion':
                    this.bper=0
                    break;
                default:
                    break;
            }
        })
    },
    beforeDestroy(){
        this.$bus.$off('Downimgshow')
    }
}
</script>

<style scoped>
.downrow1{
    background-color: rgb(236, 244, 255);
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0px;
}
.downcol1{
    text-align: center;
}
.downimg1{
    margin-top: 10px;
    width: 35px;
    height: 35px;
}
</style>